<template>
  <div class="customer-cases">
    <!-- 页面头部 -->
    <section class="cases-hero wow fadeInUp">
      <div class="hero-container">
        <div class="hero-content">
          <h1 class="hero-title">客户案例</h1>
          <p class="hero-subtitle">
            真实案例见证我们的专业实力，每一个成功项目都是对客户信任的最好回报
          </p>
          <div class="hero-stats">
            <div class="stat-item">
              <div class="stat-number">50+</div>
              <div class="stat-label">成功案例</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">98%</div>
              <div class="stat-label">客户满意度</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">24/7</div>
              <div class="stat-label">技术支持</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 案例分类筛选 -->
    <section class="cases-filter wow fadeInUp" data-wow-delay="0.2s">
      <div class="filter-container">
        <div class="filter-tabs">
          <button
            v-for="category in categories"
            :key="category.key"
            :class="['filter-btn', { active: activeCategory === category.key }]"
            @click="setActiveCategory(category.key)"
          >
            <i :class="category.icon"></i>
            {{ category.name }}
          </button>
        </div>
      </div>
    </section>

    <!-- 案例网格 -->
    <section class="cases-grid">
      <div class="grid-container">
        <div class="cases-list">
          <div
            v-for="(caseItem, index) in filteredCases"
            :key="index"
            class="case-card wow fadeInUp"
            :data-wow-delay="`${0.1 * (index % 6)}s`"
            @click="openCaseModal(caseItem)"
          >
            <div class="case-image">
              <img :src="caseItem.image" :alt="caseItem.title" />
              <div class="case-overlay">
                <div class="case-category">{{ getCategoryName(caseItem.category) }}</div>
                <button class="view-btn">
                  <i class="glyphicon glyphicon-eye-open"></i>
                  查看详情
                </button>
              </div>
            </div>
            <div class="case-content">
              <h3 class="case-title">{{ caseItem.title }}</h3>
              <p class="case-summary">{{ caseItem.summary }}</p>
              <div class="case-tags">
                <span v-for="tag in caseItem.tags" :key="tag" class="case-tag">
                  {{ tag }}
                </span>
              </div>
              <div class="case-footer">
                <div class="case-client">
                  <i class="glyphicon glyphicon-user"></i>
                  {{ caseItem.client }}
                </div>
                <div class="case-date">{{ caseItem.date }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 客户证言 -->
    <section class="testimonials wow fadeInUp">
      <div class="testimonials-container">
        <div class="section-header">
          <h2 class="section-title">客户证言</h2>
          <p class="section-subtitle">听听客户对我们服务的真实评价</p>
        </div>
        <div class="testimonials-grid">
          <div
            v-for="(testimonial, index) in testimonials"
            :key="index"
            class="testimonial-card wow fadeInUp"
            :data-wow-delay="`${0.2 * index}s`"
          >
            <div class="testimonial-content">
              <div class="quote-icon">
                <i class="glyphicon glyphicon-comment"></i>
              </div>
              <p class="testimonial-text">{{ testimonial.content }}</p>
              <div class="testimonial-author">
                <div class="author-avatar">
                  <img :src="testimonial.avatar" :alt="testimonial.name" />
                </div>
                <div class="author-info">
                  <div class="author-name">{{ testimonial.name }}</div>
                  <div class="author-title">{{ testimonial.title }}</div>
                  <div class="author-company">{{ testimonial.company }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 合作伙伴 -->
    <section class="partners wow fadeInUp">
      <div class="partners-container">
        <div class="section-header">
          <h2 class="section-title">合作伙伴</h2>
          <p class="section-subtitle">与众多知名企业建立长期合作关系</p>
        </div>
        <div class="partners-grid">
          <div
            v-for="(partner, index) in partners"
            :key="index"
            class="partner-card wow fadeInUp"
            :data-wow-delay="`${0.1 * index}s`"
          >
            <div class="partner-logo">
              <img :src="partner.logo" :alt="partner.name" />
            </div>
            <div class="partner-name">{{ partner.name }}</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 案例详情模态框 -->
    <div v-if="selectedCase" class="case-modal" @click="closeCaseModal">
      <div class="modal-content" @click.stop>
        <button class="modal-close" @click="closeCaseModal">
          <i class="glyphicon glyphicon-remove"></i>
        </button>
        <div class="modal-header">
          <h2 class="modal-title">{{ selectedCase.title }}</h2>
          <div class="modal-meta">
            <span class="modal-category">{{ getCategoryName(selectedCase.category) }}</span>
            <span class="modal-date">{{ selectedCase.date }}</span>
          </div>
        </div>
        <div class="modal-body">
          <div class="modal-image">
            <img :src="selectedCase.image" :alt="selectedCase.title" />
          </div>
          <div class="modal-details">
            <div class="detail-section">
              <h3>项目背景</h3>
              <p>{{ selectedCase.background }}</p>
            </div>
            <div class="detail-section">
              <h3>解决方案</h3>
              <p>{{ selectedCase.solution }}</p>
            </div>
            <div class="detail-section">
              <h3>项目成果</h3>
              <ul>
                <li v-for="result in selectedCase.results" :key="result">{{ result }}</li>
              </ul>
            </div>
            <div class="detail-section">
              <h3>技术栈</h3>
              <div class="tech-tags">
                <span v-for="tech in selectedCase.technologies" :key="tech" class="tech-tag">
                  {{ tech }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="CustomerCases">
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const activeCategory = ref('all')
const selectedCase = ref(null)

// 案例分类
const categories = [
  { key: 'all', name: '全部案例', icon: 'glyphicon glyphicon-th-large' },
  { key: 'platform', name: '平台开发', icon: 'glyphicon glyphicon-globe' },
  { key: 'database', name: '数据库', icon: 'glyphicon glyphicon-hdd' },
  { key: 'ecommerce', name: '电商系统', icon: 'glyphicon glyphicon-shopping-cart' },
  { key: 'mobile', name: '移动应用', icon: 'glyphicon glyphicon-phone' }
]

// 客户案例数据
const cases = [
  {
    title: '创新科技创业孵化平台',
    summary: '为创新科技公司打造的全方位创业支持平台，提供项目管理、资源对接、知识分享等功能。',
    client: '创新科技有限公司',
    category: 'platform',
    date: '2024年8月',
    image: '/api/placeholder/400/250',
    tags: ['Vue.js', 'Node.js', 'MySQL', '微服务'],
    background: '创新科技公司需要一个综合性的创业孵化平台，帮助初创企业快速成长。现有系统功能分散，缺乏统一的管理平台。',
    solution: '基于创业者之家平台架构，定制开发了包含项目管理、导师匹配、资源库、在线培训等模块的综合性平台。',
    results: [
      '入驻企业数量增长300%',
      '平台日活跃用户超过5000人',
      '成功孵化项目85个',
      '融资成功率提升至65%'
    ],
    technologies: ['Vue.js 3', 'Node.js', 'MySQL', 'Redis', 'Docker', 'Kubernetes']
  },
  {
    title: '金融科技数据分析系统',
    summary: '基于GuDB引擎构建的高性能金融数据分析平台，支持实时数据处理和复杂查询分析。',
    client: '金融科技集团',
    category: 'database',
    date: '2024年7月',
    image: '/api/placeholder/400/250',
    tags: ['GuDB', 'Python', '大数据', '实时分析'],
    background: '金融科技集团需要处理海量交易数据，原有数据库系统在高并发场景下性能不足，查询响应时间过长。',
    solution: '采用GuDB数据库引擎，优化数据存储结构，实现分布式部署，提供实时数据分析能力。',
    results: [
      '查询响应时间缩短90%',
      '支持100万TPS并发处理',
      '存储成本降低60%',
      '系统稳定性达到99.99%'
    ],
    technologies: ['GuDB', 'Python', 'Apache Kafka', 'ElasticSearch', 'Docker']
  },
  {
    title: '潮玩盲盒电商平台',
    summary: '基于箱野盲盒商城架构的潮流玩具电商平台，提供盲盒购买、开箱直播、社区交流等功能。',
    client: '潮玩文化传媒',
    category: 'ecommerce',
    date: '2024年6月',
    image: '/api/placeholder/400/250',
    tags: ['React', 'Node.js', '微信支付', '直播'],
    background: '潮玩文化传媒希望打造一个专业的盲盒电商平台，提供更好的用户体验和社区互动功能。',
    solution: '基于箱野盲盒商城的成熟架构，定制开发了包含商品管理、支付系统、直播功能、用户社区的完整电商平台。',
    results: [
      '平台上线3个月GMV突破500万',
      '注册用户超过10万人',
      '日均订单量达到2000单',
      '用户复购率达到45%'
    ],
    technologies: ['React', 'Node.js', 'MongoDB', 'Redis', '微信小程序', 'WebRTC']
  },
  {
    title: '智慧物流管理系统',
    summary: '为物流企业开发的智能化管理平台，实现订单跟踪、路线优化、库存管理等功能。',
    client: '智慧物流科技',
    category: 'platform',
    date: '2024年5月',
    image: '/api/placeholder/400/250',
    tags: ['Vue.js', 'Java', 'GPS', 'AI算法'],
    background: '物流企业需要提升运营效率，降低配送成本，现有系统自动化程度低，人工成本高。',
    solution: '开发了集成GPS追踪、AI路线优化、自动化调度的智慧物流管理系统。',
    results: [
      '配送效率提升40%',
      '运营成本降低30%',
      '客户满意度提升至95%',
      '系统故障率低于0.1%'
    ],
    technologies: ['Vue.js', 'Spring Boot', 'MySQL', 'Redis', 'GPS API', 'AI算法']
  },
  {
    title: '教育培训移动应用',
    summary: '面向K12教育的移动学习平台，提供在线课程、作业管理、家校沟通等功能。',
    client: '优学教育集团',
    category: 'mobile',
    date: '2024年4月',
    image: '/api/placeholder/400/250',
    tags: ['React Native', '在线教育', '直播', '音视频'],
    background: '教育集团需要一个移动端学习平台，支持学生在线学习、教师管理、家长监督等功能。',
    solution: '开发了跨平台移动应用，集成视频直播、作业系统、成绩管理、家校沟通等功能模块。',
    results: [
      '学生学习时长增加60%',
      '教师工作效率提升50%',
      '家长满意度达到92%',
      '应用商店评分4.8分'
    ],
    technologies: ['React Native', 'Node.js', 'MongoDB', 'WebRTC', 'FFmpeg']
  },
  {
    title: '医疗健康数据平台',
    summary: '为医疗机构构建的患者数据管理和分析平台，支持电子病历、数据分析、远程诊疗等功能。',
    client: '康复医疗集团',
    category: 'database',
    date: '2024年3月',
    image: '/api/placeholder/400/250',
    tags: ['GuDB', 'FHIR', '数据安全', '云计算'],
    background: '医疗集团需要统一管理患者数据，提高诊疗效率，现有系统数据孤岛问题严重。',
    solution: '基于GuDB引擎构建高性能医疗数据平台，遵循FHIR标准，确保数据安全和互操作性。',
    results: [
      '数据查询速度提升80%',
      '诊疗效率提升35%',
      '数据安全等级达到三级',
      '系统可用性99.9%'
    ],
    technologies: ['GuDB', 'FHIR', 'Spring Cloud', 'Redis', 'Kubernetes', '区块链']
  }
]

// 客户证言
const testimonials = [
  {
    name: '张总',
    title: 'CTO',
    company: '创新科技有限公司',
    content: '合作过程非常愉快，技术团队专业且响应迅速。平台上线后效果超出预期，大大提升了我们的运营效率。',
    avatar: '/api/placeholder/60/60'
  },
  {
    name: '李经理',
    title: '技术总监',
    company: '金融科技集团',
    content: 'GuDB数据库引擎的性能表现令人惊艳，在高并发场景下依然稳定可靠，为我们节省了大量成本。',
    avatar: '/api/placeholder/60/60'
  },
  {
    name: '王总',
    title: 'CEO',
    company: '潮玩文化传媒',
    content: '电商平台的用户体验做得很棒，特别是盲盒开箱的创新功能，用户反响非常好。',
    avatar: '/api/placeholder/60/60'
  }
]

// 合作伙伴
const partners = [
  { name: '阿里云', logo: '/api/placeholder/120/60' },
  { name: '腾讯云', logo: '/api/placeholder/120/60' },
  { name: '华为云', logo: '/api/placeholder/120/60' },
  { name: '京东云', logo: '/api/placeholder/120/60' },
  { name: '百度云', logo: '/api/placeholder/120/60' },
  { name: '字节跳动', logo: '/api/placeholder/120/60' }
]

// 计算属性
const filteredCases = computed(() => {
  if (activeCategory.value === 'all') {
    return cases
  }
  return cases.filter(caseItem => caseItem.category === activeCategory.value)
})

// 方法
const setActiveCategory = (category) => {
  activeCategory.value = category
}

const getCategoryName = (key) => {
  const category = categories.find(cat => cat.key === key)
  return category ? category.name : ''
}

const openCaseModal = (caseItem) => {
  selectedCase.value = caseItem
  document.body.style.overflow = 'hidden'
}

const closeCaseModal = () => {
  selectedCase.value = null
  document.body.style.overflow = ''
}

// 生命周期
onMounted(() => {
  // 初始化WOW.js动画
  if (typeof WOW !== 'undefined') {
    new WOW().init()
  }
})
</script>

<style scoped>
/* 页面容器 */
.customer-cases {
  min-height: 100vh;
  background: #f8f9fa;
}

/* 页面头部 */
.cases-hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}

.cases-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
  animation: float 20s infinite linear;
}

@keyframes float {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-100px) rotate(360deg); }
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.hero-content {
  text-align: center;
}

.hero-title {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: -1px;
}

.hero-subtitle {
  font-size: 20px;
  margin-bottom: 50px;
  opacity: 0.9;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 40px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 8px;
  background: linear-gradient(45deg, #fff, #e0e7ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 16px;
  opacity: 0.8;
}

/* 案例筛选 */
.cases-filter {
  background: white;
  padding: 40px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.filter-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.filter-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 2px solid #e9ecef;
  background: white;
  color: #6c757d;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  border-color: #667eea;
  color: #667eea;
  transform: translateY(-2px);
}

.filter-btn.active {
  background: #667eea;
  border-color: #667eea;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* 案例网格 */
.cases-grid {
  padding: 60px 0;
}

.grid-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.cases-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 30px;
}

.case-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.case-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.case-image {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.case-card:hover .case-image img {
  transform: scale(1.05);
}

.case-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.case-card:hover .case-overlay {
  opacity: 1;
}

.case-category {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 6px 12px;
  border-radius: 15px;
  color: white;
  font-size: 14px;
  align-self: flex-start;
}

.view-btn {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 12px 20px;
  border-radius: 25px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  transition: all 0.3s ease;
}

.view-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.case-content {
  padding: 30px;
}

.case-title {
  font-size: 20px;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 12px;
  line-height: 1.4;
}

.case-summary {
  color: #6c757d;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.case-tag {
  background: #f8f9fa;
  color: #6c757d;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 14px;
  border: 1px solid #e9ecef;
}

.case-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

.case-client {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6c757d;
  font-size: 14px;
}

.case-date {
  color: #6c757d;
  font-size: 14px;
}

/* 客户证言 */
.testimonials {
  background: white;
  padding: 80px 0;
}

.testimonials-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-title {
  font-size: 36px;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: 18px;
  color: #6c757d;
  max-width: 500px;
  margin: 0 auto;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.testimonial-card {
  background: #f8f9fa;
  padding: 30px;
  border-radius: 20px;
  position: relative;
  border: 1px solid #e9ecef;
}

.quote-icon {
  position: absolute;
  top: -15px;
  left: 30px;
  background: #667eea;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.testimonial-text {
  color: #4a5568;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 15px;
}

.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-name {
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 4px;
}

.author-title {
  color: #667eea;
  font-size: 14px;
  margin-bottom: 2px;
}

.author-company {
  color: #6c757d;
  font-size: 14px;
}

/* 合作伙伴 */
.partners {
  background: #f8f9fa;
  padding: 80px 0;
}

.partners-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}

.partner-card {
  background: white;
  padding: 40px 20px;
  border-radius: 15px;
  text-align: center;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.partner-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.partner-logo {
  margin-bottom: 15px;
}

.partner-logo img {
  max-width: 120px;
  height: 60px;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.partner-card:hover .partner-logo img {
  opacity: 1;
}

.partner-name {
  font-weight: 600;
  color: #2d3748;
  font-size: 16px;
}

/* 模态框 */
.case-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
  backdrop-filter: blur(5px);
}

.modal-content {
  background: white;
  border-radius: 20px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #f8f9fa;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  transition: all 0.3s ease;
}

.modal-close:hover {
  background: #e9ecef;
  transform: scale(1.1);
}

.modal-header {
  padding: 40px 40px 20px;
  border-bottom: 1px solid #e9ecef;
}

.modal-title {
  font-size: 28px;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 10px;
}

.modal-meta {
  display: flex;
  gap: 20px;
  align-items: center;
}

.modal-category {
  background: #667eea;
  color: white;
  padding: 6px 15px;
  border-radius: 15px;
  font-size: 14px;
}

.modal-date {
  color: #6c757d;
  font-size: 16px;
}

.modal-body {
  padding: 0 40px 40px;
}

.modal-image {
  margin: 30px 0;
  border-radius: 15px;
  overflow: hidden;
}

.modal-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.detail-section {
  margin-bottom: 30px;
}

.detail-section h3 {
  font-size: 20px;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #667eea;
  display: inline-block;
}

.detail-section p {
  color: #4a5568;
  font-size: 16px;
  line-height: 1.6;
}

.detail-section ul {
  list-style: none;
  padding: 0;
}

.detail-section li {
  color: #4a5568;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}

.detail-section li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #667eea;
  font-weight: bold;
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tech-tag {
  background: #f8f9fa;
  color: #6c757d;
  padding: 8px 16px;
  border-radius: 15px;
  font-size: 14px;
  border: 1px solid #e9ecef;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 36px;
  }

  .hero-subtitle {
    font-size: 18px;
  }

  .hero-stats {
    flex-direction: column;
    gap: 30px;
  }

  .filter-tabs {
    justify-content: center;
    gap: 10px;
  }

  .filter-btn {
    padding: 10px 16px;
    font-size: 14px;
  }

  .cases-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .case-content {
    padding: 20px;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .modal-content {
    margin: 10px;
    max-height: 95vh;
  }

  .modal-header,
  .modal-body {
    padding: 20px;
  }

  .modal-title {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 28px;
  }

  .section-title {
    font-size: 28px;
  }

  .filter-btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  .case-title {
    font-size: 18px;
  }

  .partners-grid {
    grid-template-columns: 1fr;
  }
}
</style>